2025年8月16日日本語

Webpack 5のJavaScriptモジュールフェデレーションでマイクロフロントエンドの力を解き放ちましょう。スケーラブルで保守性が高く、独立したWebアプリケーションの構築方法を学びます。

Webpack 5のJavaScriptモジュールフェデレーション：マイクロフロントエンドへの包括的ガイド

進化し続けるWeb開発の世界において、大規模で複雑なアプリケーションを構築することは困難な作業となり得ます。従来のモノリシックなアーキテクチャは、開発時間の増加、デプロイのボトルネック、コード品質の維持における課題につながることがよくあります。マイクロフロントエンドは、これらの課題に対処するための強力なアーキテクチャパターンとして登場し、チームがより大きなWebアプリケーションの独立した部分を構築し、デプロイすることを可能にします。マイクロフロントエンドを実装するための最も有望な技術の1つが、Webpack 5で導入されたJavaScriptモジュールフェデレーションです。

マイクロフロントエンドとは？

マイクロフロントエンドは、フロントエンドアプリをより小さく独立したユニットに分解するアーキテクチャスタイルであり、これらのユニットは異なるチームによって自律的に開発、テスト、デプロイすることができます。各マイクロフロントエンドは特定のビジネスドメインや機能を担当し、実行時に組み合わされて完全なユーザーインターフェースを形成します。

これを会社に例えてみましょう。1つの巨大な開発チームを持つ代わりに、特定の分野に焦点を当てた複数の小規模なチームが存在します。各チームは独立して作業できるため、開発サイクルが速くなり、メンテナンスも容易になります。Amazonのような大規模なeコマースプラットフォームを考えてみてください。製品カタログ、ショッピングカート、チェックアウトプロセス、ユーザーアカウント管理などを、それぞれ異なるチームが管理しているかもしれません。これらはすべて独立したマイクロフロントエンドとなり得ます。

マイクロフロントエンドの利点：

独立したデプロイ： チームはアプリケーションの他の部分に影響を与えることなく、マイクロフロントエンドを独立してデプロイできます。これにより、デプロイのリスクが軽減され、リリースサイクルが速くなります。
技術に依存しない： 異なるマイクロフロントエンドを、異なる技術やフレームワーク（例：React、Angular、Vue.js）を使用して構築できます。これにより、チームは特定のニーズに最適な技術を選択し、アプリケーション全体を書き直すことなく新しい技術を段階的に採用できます。あるチームが製品カタログにReactを、別のチームがマーケティングのランディングページにVue.jsを、3番目のチームがチェックアウトプロセスにAngularを使用していると想像してみてください。
チームの自律性の向上： チームは自分たちのマイクロフロントエンドを完全に所有するため、自律性が高まり、意思決定が速くなり、開発者の生産性が向上します。
スケーラビリティの向上： マイクロフロントエンドにより、個々のマイクロフロントエンドを異なるサーバーにデプロイすることで、アプリケーションを水平にスケールできます。
コードの再利用性： 共有コンポーネントやライブラリは、マイクロフロントエンド間で簡単に共有できます。
保守の容易さ： 小規模なコードベースは、一般的に理解、保守、デバッグが容易です。

マイクロフロントエンドの課題：

複雑性の増加： 複数のマイクロフロントエンドを管理することは、特に通信、状態管理、デプロイの観点から、アーキテクチャ全体の複雑性を増す可能性があります。
パフォーマンスのオーバーヘッド： 複数のマイクロフロントエンドを読み込むことは、特に適切に最適化されていない場合、パフォーマンスのオーバーヘッドを引き起こす可能性があります。
横断的関心事： 認証、認可、テーマ設定などの横断的関心事の処理は、マイクロフロントエンドアーキテクチャでは困難な場合があります。
運用のオーバーヘッド： 複数のマイクロフロントエンドのデプロイと監視を管理するために、成熟したDevOpsプラクティスとインフラストラクチャが必要です。

JavaScriptモジュールフェデレーションとは？

JavaScriptモジュールフェデレーションは、個別にコンパイルされたJavaScriptアプリケーション間で実行時にコードを共有できるWebpack 5の機能です。これにより、アプリケーションの一部を他のアプリケーションが利用できる「モジュール」として公開でき、npmのような中央リポジトリに公開する必要がなくなります。

モジュールフェデレーションは、各アプリケーションが独自の機能を提供し、他のアプリケーションから機能を消費できる、連合化されたアプリケーションのエコシステムを作成する方法だと考えてください。これにより、ビルド時の依存関係が不要になり、真に独立したデプロイが可能になります。

例えば、デザインシステムチームはUIコンポーネントをモジュールとして公開し、さまざまなアプリケーションチームはこれらのコンポーネントをnpmパッケージとしてインストールすることなく、デザインシステムアプリケーションから直接利用できます。デザインシステムチームがコンポーネントを更新すると、その変更はすべての利用側アプリケーションに自動的に反映されます。

モジュールフェデレーションの主要概念：

ホスト（Host）： リモートモジュールを消費するメインのアプリケーション。
リモート（Remote）： 他のアプリケーションが消費するためにモジュールを公開するアプリケーション。
共有モジュール（Shared Modules）： ホストとリモートアプリケーション間で共有されるモジュール（例：React、Lodash）。モジュールフェデレーションは、各モジュールのバージョンが1つだけロードされるように、共有モジュールのバージョニングと重複排除を自動的に処理できます。
公開モジュール（Exposed Modules）： リモートアプリケーションから他のアプリケーションが利用できるように提供される特定のモジュール。
RemoteEntry.js： リモートアプリケーションの公開モジュールに関するメタデータを含む、Webpackによって生成されるファイル。ホストアプリケーションはこのファイルを使用してリモートモジュールを検出し、ロードします。

Webpack 5でモジュールフェデレーションを設定する：実践ガイド

Webpack 5でモジュールフェデレーションを設定する実践的な例を見ていきましょう。ホストアプリケーションとリモートアプリケーションという2つのシンプルなアプリケーションを作成します。リモートアプリケーションがコンポーネントを公開し、ホストアプリケーションがそれを消費します。

1. プロジェクトのセットアップ

アプリケーション用に `host` と `remote` という2つの別々のディレクトリを作成します。

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. リモートアプリケーションの設定

`remote` ディレクトリに、以下のファイルを作成します：

`src/index.js`：アプリケーションのエントリーポイント。
`src/RemoteComponent.jsx`：公開されるコンポーネント。
`webpack.config.js`：Webpackの設定ファイル。

src/index.js：

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx：

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js：

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

基本的なHTML構造を持つ `public/index.html` を作成します。重要なのは `

` です。

3. ホストアプリケーションの設定

`host` ディレクトリに、以下のファイルを作成します：

`src/index.js`：アプリケーションのエントリーポイント。
`webpack.config.js`：Webpackの設定ファイル。

src/index.js：

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js：

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

基本的なHTML構造を持つ `public/index.html` を作成します（リモートアプリと同様）。重要なのは `

` です。

4. Babelのインストール

`host` と `remote` の両方のディレクトリで、Babelの依存関係をインストールします：

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. アプリケーションの実行

`host` と `remote` の両方のディレクトリで、`package.json`に以下のスクリプトを追加します：

```json "scripts": { "start": "webpack serve" } ```

では、両方のアプリケーションを起動します：

```bash cd remote npm start cd ../host npm start ```

ブラウザを開き、`http://localhost:3000`にアクセスしてください。ホストアプリケーション内にリモートコンポーネントがレンダリングされているのが見えるはずです。

主要な設定オプションの説明：

`name`: アプリケーションの一意の名前。
`filename`: 公開されるモジュールに関するメタデータを含むファイルの名前（例： `remoteEntry.js`）。
`exposes`: どのモジュールを公開するかを指定する、モジュール名とファイルパスのマッピング。
`remotes`: 各リモートアプリケーションのremoteEntry.jsファイルを見つける場所を指定する、リモートアプリケーション名とURLのマッピング。
`shared`: ホストとリモートアプリケーション間で共有されるべきモジュールのリスト。`singleton: true` オプションは、各共有モジュールのインスタンスが1つだけロードされることを保証します。`eager: true` オプションは、共有モジュールが早期に（つまり、他のモジュールより前に）ロードされることを保証します。

高度なモジュールフェデレーション技術

モジュールフェデレーションは、さらに洗練されたマイクロフロントエンドアーキテクチャを構築するのに役立つ多くの高度な機能を提供します。

動的リモート

Webpackの設定にリモートアプリケーションのURLをハードコーディングする代わりに、実行時に動的にロードすることができます。これにより、ホストアプリケーションを再ビルドすることなく、リモートアプリケーションの場所を簡単に更新できます。

例えば、リモートアプリケーションのURLを設定ファイルやデータベースに保存し、JavaScriptを使用して動的にロードすることができます。

```javascript // In webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Assume remoteUrl is something like 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // the key of module federation is that the remote app is // available using the name in the remote resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

これで、クエリパラメータ `?remote=http://localhost:3001/remoteEntry.js` を付けてホストアプリをロードできます。

バージョン管理された共有モジュール

モジュールフェデレーションは、共有モジュールのバージョニングと重複排除を自動的に処理し、互換性のあるバージョンの各モジュールが1つだけロードされるようにします。これは、多くの依存関係を持つ大規模で複雑なアプリケーションを扱う場合に特に重要です。

Webpackの設定で、各共有モジュールのバージョン範囲を指定できます。

```javascript // In webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

カスタムモジュールローダー

モジュールフェデレーションでは、異なるソースから、または異なる形式でモジュールをロードするために使用できるカスタムモジュールローダーを定義できます。これは、CDNやカスタムモジュールレジストリからモジュールをロードするのに役立ちます。

マイクロフロントエンド間の状態共有

マイクロフロントエンドアーキテクチャの課題の1つは、異なるマイクロフロントエンド間で状態を共有することです。この課題に対処するために、いくつかのアプローチがあります：

URLベースの状態管理： 状態をURLに保存し、URLを使用してマイクロフロントエンド間で通信します。これはシンプルで直接的なアプローチですが、複雑な状態には扱いにくくなる可能性があります。
カスタムイベント： カスタムイベントを使用して、マイクロフロントエンド間で状態の変更をブロードキャストします。これにより、マイクロフロントエンド間の疎結合が可能になりますが、イベントのサブスクリプション管理が難しくなることがあります。
共有状態管理ライブラリ： ReduxやMobXのような共有状態管理ライブラリを使用して、アプリケーション全体の状態を管理します。これにより、状態を管理するための一元化された一貫した方法が提供されますが、特定状態管理ライブラリへの依存が生じる可能性があります。
メッセージブローカー： RabbitMQやKafkaのようなメッセージブローカーを使用して、マイクロフロントエンド間の通信と状態共有を促進します。これはより複雑な解決策ですが、高度な柔軟性とスケーラビリティを提供します。

モジュールフェデレーションでマイクロフロントエンドを実装するためのベストプラクティス

モジュールフェデレーションでマイクロフロントエンドを実装する際に留意すべきベストプラクティスをいくつか紹介します：

各マイクロフロントエンドの明確な境界を定義する： 各マイクロフロントエンドは、特定のビジネスドメインまたは機能を担当し、明確に定義されたインターフェースを持つべきです。
一貫した技術スタックを使用する： モジュールフェデレーションでは、異なるマイクロフロントエンドに異なる技術を使用できますが、複雑さを減らし保守性を向上させるために、一貫した技術スタックを使用することが一般的に良い考えです。
明確な通信プロトコルを確立する： マイクロフロントエンドが互いにどのように対話するかについて、明確な通信プロトコルを定義します。
デプロイプロセスを自動化する： マイクロフロントエンドが独立して確実にデプロイできるように、デプロイプロセスを自動化します。CI/CDパイプラインやInfrastructure-as-Codeツールの使用を検討してください。
マイクロフロントエンドのパフォーマンスを監視する： パフォーマンスのボトルネックを特定し、対処するために、マイクロフロントエンドのパフォーマンスを監視します。Google Analytics、New Relic、Datadogなどのツールを使用してください。
堅牢なエラーハンドリングを実装する： アプリケーションが障害に対して回復力を持つように、堅牢なエラーハンドリングを実装します。
分散型のガバナンスモデルを採用する： 全体的な一貫性と品質を維持しつつ、チームが自身のマイクロフロントエンドに関する決定を下せるように権限を与えます。

モジュールフェデレーションの実世界での活用例

具体的なケーススタディは機密情報であることが多いですが、モジュールフェデレーションが非常に役立つ一般的なシナリオをいくつか紹介します：

Eコマースプラットフォーム： 前述の通り、大規模なEコマースプラットフォームは、モジュールフェデレーションを使用して、製品カタログ、ショッピングカート、チェックアウトプロセス、ユーザーアカウント管理のための独立したマイクロフロントエンドを構築できます。これにより、異なるチームがこれらの機能に独立して取り組み、アプリケーションの他の部分に影響を与えることなくデプロイできます。グローバルなプラットフォームでは、リモートモジュールを介して異なる地域向けの機能をカスタマイズできます。
金融サービスアプリケーション： 金融サービスアプリケーションは、多くの場合、多数の異なる機能を備えた複雑なユーザーインターフェースを持っています。モジュールフェデレーションを使用して、異なる口座タイプ、取引プラットフォーム、レポートダッシュボードのための独立したマイクロフロントエンドを構築できます。特定の国に固有のコンプライアンス機能は、モジュールフェデレーションを介して提供できます。
ヘルスケアポータル： ヘルスケアポータルは、モジュールフェデレーションを使用して、患者管理、予約スケジュール、医療記録アクセスのための独立したマイクロフロントエンドを構築できます。異なる保険プロバイダーや地域向けの異なるモジュールを動的にロードできます。
コンテンツ管理システム（CMS）： CMSは、モジュールフェデレーションを使用して、サードパーティ開発者からのリモートモジュールをロードすることで、ユーザーが自分のウェブサイトにカスタム機能を追加できるようにします。異なるテーマ、プラグイン、ウィジェットを独立したマイクロフロントエンドとして配布できます。
学習管理システム（LMS）： LMSは、独立して開発され、モジュールフェデレーションを介して統一されたプラットフォームに統合されたコースを提供できます。個々のコースの更新は、プラットフォーム全体の再デプロイを必要としません。

結論

Webpack 5のJavaScriptモジュールフェデレーションは、マイクロフロントエンドアーキテクチャを構築するための強力で柔軟な方法を提供します。これにより、個別にコンパイルされたJavaScriptアプリケーション間で実行時にコードを共有でき、独立したデプロイ、技術の多様性、チームの自律性の向上を実現します。このガイドで概説したベストプラクティスに従うことで、モジュールフェデレーションを活用して、スケーラブルで保守性が高く、革新的なWebアプリケーションを構築できます。

フロントエンド開発の未来は、間違いなくモジュール化され分散化されたアーキテクチャに向かっています。モジュールフェデレーションは、これらの現代的なシステムを構築するための重要なツールを提供し、チームがより速く、より柔軟に、そしてより回復力のある複雑なアプリケーションを作成できるようにします。技術が成熟するにつれて、さらに革新的なユースケースやベストプラクティスが登場することが期待されます。